<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>监视属性</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="root">
    <h2>今天天气很{{info}}</h2>
    <button @click="changeWeather">切换天气</button>
    <button @click="isHot = !isHot">切换天气</button>
    <hr>
    a的值为{{num.a}}
    <button @click="num.a++">点我让a+1</button>
    <hr>
    b的值为{{num.b}}
    <button @click="num.b++">点我让b+1</button>
  </div>
  <script>
    Vue.config.productionTip = false
    //创建vue实例
    new Vue({
      el:'#root', //el用于指定当前vue实例为拿个容器服务，值通常为css选择器
      data: { //用于存储数据，数据供el指定的容器去使用，值我们暂时先写为对象
        isHot:true,
        num:{
          a:1,
          b:1
        }
      },
      methods:{
        changeWeather(){
          this.isHot = !this.isHot
        }
      },
      computed:{
        info(){
          return this.isHot ? '炎热':'凉爽'
        }
      },
      watch:{
        //watch既能检测计算属性也能检测data的属性
        //正常写法
        isHot:{
          //handler什么时候调用，当isHot发生改变时候调用
          handler(newValue,oldValue){
            console.log('@@@@',newValue,oldValue)
          },
        },
        //简写 前提是只有handler 不能有deep或者immediate:true
        isHot(newValue,oldValue){
          console.log('@@@@',newValue,oldValue)
        },
        'num.a':{
          //handler什么时候调用，当isHot发生改变时候调用
          handler(newValue,oldValue){
            console.log('aaa',newValue,oldValue)
          },
        },
        num:{
          //开启深度监视,监视多级结构中所有属性的改变
          deep:true,
          //handler什么时候调用，当isHot发生改变时候调用
          handler(newValue,oldValue){
            console.log('aaa',newValue,oldValue)
          },
        },
      },
    })
  </script>
</body>
</html>